<template>
	<view class="container">
		
		<view class="improve re_con">
			<view class="re_form">
				<view class="tit">转出数量<text>余额：480 ADC</text></view>
				<view class="re_input">
					<image src="/static/images/g_img27.png" class="img"></image>
					<u-input type="number" placeholder="0" placeholderStyle="color:#DCDDDD"></u-input>
				</view>
			</view>
			
			<view class="re_form">
				<view class="tit">购买人ID</view>
				<view class="re_input">
					<image src="/static/images/img_34.png" class="img"></image>
					<u-input type="text" placeholder="" placeholderStyle="color:#DCDDDD" v-model="cusname_ID"></u-input>
					<button :class="cusname_ID.length>0?'on':''"><image src="/static/images/img_89.png" mode="widthFix"></image>核实</button>
				</view>
				<view class="re_state">
					<image src="/static/images/img_91.png" mode="widthFix"></image>
					<text>无记录</text>
				</view>
				<view class="re_state">
					<image src="/static/images/img_90.png" mode="widthFix"></image>
					<text class="on">张光泽</text>
				</view>
			</view>
			
			<view class="yanz_form">
				<view class="tels"><text>短信验证</text>138*****899</view>
				<view class="input_code">
					<u-input placeholder="输入验证码" placeholderStyle="color: #C9CACA" v-model="cusname"  @focus="keyboard_show = true"></u-input>
					<u-toast ref="uToast"></u-toast>
					<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
					<u-button @tap="getCode">{{tips}}</u-button>
				</view>	
			</view>
		</view>
		
		<!--键盘start-->
		<u-keyboard mode="number" ref="uKeyboard" @change="valChange" @backspace="backspace" :tooltip="tooltip" :dotDisabled="true" :show="keyboard_show" :closeOnClickOverlay="true" @close="key_close"></u-keyboard>
		<!--键盘end-->
		
		<!--底部start-->
		<view class="f_btn re_btn">
			<button class="submit" @tap="open_success_box">转出</button><!--on-->
			<u-safe-bottom></u-safe-bottom>
		</view>
		<!--底部end-->
		
		<!--弹窗start-->
		<u-popup mode="bottom" :show="success_box" :closeOnClickOverlay="true" @close="succees_popup_close" customStyle="background: none" >
			<view class="success_box">
				<text class="close" @tap="succees_popup_close"></text>
				<image src="/static/images/img_11.png"></image>
				<view class="con">交易完成<text>ADC已转至对方账户</text></view>
				<view class="btn">
					<button class="submit on" @tap="succees_popup_close">互转记录</button>
					<button class="back_btn" @tap="succees_popup_close">资产明细</button>
					<u-safe-bottom customStyle="background: #FAFAFA"></u-safe-bottom>
				</view>
			</view>
		</u-popup>
		<!--弹窗end-->
		
	</view>
</template>

<script>
export default{
	data(){
		return{
			tips: '',
			seconds: 60,
			keyboard_show: false,
			tooltip:false,
			cusname:'',
			cusname_ID:'',
			success_box: false
		}
	},
	methods:{
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if(this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}, 2000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		valChange(val) {
			this.cusname += val;
		},
		backspace(){
			if(this.cusname.length) this.cusname = this.cusname.substr(0, this.cusname.length - 1);
		},
		key_close(){
			this.keyboard_show =false
		},
		open_success_box(){
			this.success_box = true
		},
		succees_popup_close(){
			this.success_box = false
		}
	}
}
</script>

<style lang="scss">
@import url("../../common/style.scss");
@import url("../member/member.scss");
@import url("create.scss");
</style>